<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_定位之固定定位，绝对定位的特殊应用2</title>
    <style>
        .div1{
            height: 500px;
            background-color: green;
            position: relative;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: fuchsia;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    </style>
</head>
<body>
<!--
    绝对定位、固定定位的特殊应用：
        注意：
            1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
            2.发生相对定位后，元素依然是之前的显示模式。
            3.以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包含相对定位的元素。
        1.让定位元素在包含块中居中：
            1.定位元素的宽想和包含块一样，可以给定位元素同时设置left和right属性，并且属性值为0，上top下bottom设置为0并且设置margin设置为auto
            2.并且该定位元素必须设置宽度和高度

-->
    <div class="div1">
        <div class="div2">div2</div>
    </div>

</body>
</html>